<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Blog Manager</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.">

    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]--
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="js/bootstrap.min.js"></script>

    <link rel="shortcut icon" href="${ctx}/img/favicon.ico">
    <style type="text/css">
        ::-webkit-scrollbar {
            width: 12px;
            height: 12px
        }

        ::-webkit-scrollbar-button:vertical {
            display: none
        }

        ::-webkit-scrollbar-track:vertical {
            background-color: black
        }

        ::-webkit-scrollbar-track-piece {
            background: #FDFDFD;
        }

        ::-webkit-scrollbar-thumb:vertical {
            background-color: #8E8E8E;
            border-radius: 5px
        }

        ::-webkit-scrollbar-thumb:vertical:hover {
            background-color: #3B3B3B
        }

        ::-webkit-scrollbar-corner:vertical {
            background-color: #535353
        }

        @-webkit-keyframes animate-cloud {
            from {
                background-position: 600px 100%;
            }
            to {
                background-position: 0 100%;
            }
        }

        @-moz-keyframes animate-cloud {
            from {
                background-position: 600px 100%;
            }
            to {
                background-position: 0 100%;
            }
        }

        @-ms-keyframes animate-cloud {
            from {
                background-position: 600px 100%;
            }
            to {
                background-position: 0 100%;
            }
        }

        @-o-keyframes animate-cloud {
            from {
                background-position: 600px 100%;
            }
            to {
                background-position: 0 100%;
            }
        }

        html {
            height: 100%;
        }

        body {
            background: url(${ctx}/images/cloud.png) 0 bottom repeat-x #049ec4;
            -webkit-animation: animate-cloud 20s linear infinite;
            -moz-animation: animate-cloud 20s linear infinite;
            -ms-animation: animate-cloud 20s linear infinite;
            -o-animation: animate-cloud 20s linear infinite;
            animation: animate-cloud 20s linear infinite;
            width: 100%;
            height: auto;
        }

        #mainLogin {
            margin-top: 100px;
        }
    </style>
</head>

<body>
<div id="mainLogin" class="container">
    <div class="row">

        <div class="row">
            <div class="col-md-4 col-md-offset-4" style="text-align:center;margin-bottom:25px">
                <h2></h2>
            </div>
        </div>

        <div class="row">
            <div class="well col-md-4 col-md-offset-4">
                <div class="alert alert-info alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                        &times;
                    </button>
                    请输入用户名和密码
                </div>
                <form class="form-horizontal" action="test" method="post" name="loginForm" id="loginForm">
                    <fieldset>
                        <div class="input-group input-group-lg">
								<span class="input-group-addon"><i
                                        class="glyphicon glyphicon-user red"></i></span>
                            <input type="text" name="userName" class="form-control" placeholder="用户名/邮箱/手机号">
                        </div>
                        <div class="clearfix"></div>
                        <br>

                        <div class="input-group input-group-lg">
								<span class="input-group-addon"><i
                                        class="glyphicon glyphicon-lock red"></i></span>
                            <input type="password" name="password" class="form-control" placeholder="密码">
                        </div>

                        <div class="clearfix"></div>
                        <br>
                        <div class="input-group input-group-lg">
                            <input type="text" class="form-control" name="vcode" placeholder="gif验证码">
                            <span class="input-group-addon" style="padding: 0;margin: 0">
                                <img src="getGifCode" onclick="javascript:this.src='getGifCode?tm='+Math.random()"/>
                            </span>
                        </div>
                        <div class="clearfix"></div>
                        <br>

                        <div class="input-group input-group-lg">
                            <input type="text" class="form-control" name="vcode" placeholder="验证码">
                            <span class="input-group-addon" style="padding: 0;margin: 0">
                                <img src="getVCode" onclick="javascript:this.src='getVCode?tm='+Math.random()"/>
                            </span>
                        </div>
                        <div class="clearfix"></div>
                        <br>

                        <div class="input-group input-group-lg">
                            <input type="text" class="form-control" name="vcode" placeholder="jpg验证码">
                            <span class="input-group-addon" style="padding: 0;margin: 0">
                                <img src="getJPGCode" onclick="javascript:this.src='getJPGCode?tm='+Math.random()"/>
                            </span>
                        </div>

                        <div class="clearfix"></div>

                        <div class="input-prepend" style="text-align:center;margin-top:10px">
                            <label class="remember" for="rememberMe">
                                <input type="checkbox" id="rememberMe" name="rememberMe" checked="checked" value="true">记住我</label>
                            <button type="submit" id="submitBtn" class="col-md-12 btn btn-primary"
                                    style="margin: 10px 0px 10px 20px ;float:right;">登陆
                            </button>
                        </div>
                        <div class="clearfix"></div>

                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    $("#submitBtn")
</script>
</body>
</html>
